<!--  -->
<template>
    <view
        class="grid grid-cols-4 place-items-center bg-white rounded-lg mt-4 h-24"
    >
        <view
            v-for="(item, index) in actionList"
            :key="index"
            class="flex justify-center items-center flex-col"
        >
            <image class="size-9" :src="item.icon" mode="scaleToFill"></image>
            <view class="font-bold mt-1">{{ item.label }}</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import previewPng from "@/static/preview.png";
import recordPng from "@/static/record.png";
import scalePng from "@/static/scale.png";
import sellPng from "@/static/sell.png";
import { ref } from "vue";

const action = () => {
    console.log("功能");
};
const actionList = ref([
    {
        label: "扫一扫",
        icon: scalePng,
        path: action,
    },
    {
        label: "预约看房",
        icon: previewPng,
        path: action,
    },
    {
        label: "订单记录",
        icon: recordPng,
        path: action,
    },
    {
        label: "卖房",
        icon: sellPng,
        path: action,
    },
]);
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
</style>
